<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="custom-navbar">
			<view class="nav-content">
				<view class="nav-title">
					<text class="title">城市探索</text>
					<text class="subtitle">发现泉州的历史文化与现代魅力</text>
				</view>
				<view class="nav-avatar">
					<image class="avatar" src="/static/avatar.jpg" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		
		<!-- 主内容区域 -->
		<scroll-view class="scroll-view" scroll-y="true">
			<!-- 轮播图 -->
			<view class="card swiper-card">
				<view class="card-header">
					<view class="card-title">
						<uni-icons type="image" size="20" color="#1a73e8"></uni-icons>
						<text class="title-text">泉州风光</text>
					</view>
					<view class="card-indicator">
						<text class="indicator-text">{{ currentSwiper + 1 }}/{{ swiperList.length }}</text>
					</view>
				</view>
				<swiper class="swiper" :autoplay="true" :interval="3000" :duration="500" :circular="true"
					:indicator-dots="false" @change="onSwiperChange">
					<swiper-item v-for="(item, index) in swiperList" :key="index">
						<view class="swiper-item">
							<image class="swiper-image" :src="item.image" mode="aspectFill" />
							<view class="swiper-content">
								<text class="swiper-title">{{ item.title }}</text>
								<text class="swiper-desc">{{ item.desc }}</text>
							</view>
						</view>
					</swiper-item>
				</swiper>
				<!-- 自定义指示点 -->
				<view class="custom-indicator">
					<view v-for="(item, index) in swiperList" :key="index" 
						:class="['indicator-dot', currentSwiper === index ? 'active' : '']"></view>
				</view>
			</view>
			
			<!-- 音乐播放器 -->
			<view class="card music-player-card">
				<view class="card-header">
					<view class="card-title">
						<uni-icons type="headphones" size="20" color="#1a73e8"></uni-icons>
						<text class="title-text">城市背景音乐</text>
					</view>
					<view class="music-controls">
						<text class="music-time">{{ currentTime }} / {{ duration }}</text>
					</view>
				</view>
				
				<view class="music-player">
					<!-- 歌曲信息 -->
					<view class="music-info">
						<image class="music-cover" :src="currentMusic.cover" mode="aspectFill"></image>
						<view class="music-details">
							<text class="music-name">{{ currentMusic.name }}</text>
							<text class="music-artist">{{ currentMusic.artist }}</text>
						</view>
						<view class="music-like" @click="toggleLike">
							<uni-icons :type="currentMusic.liked ? 'heart-filled' : 'heart'" 
								size="20" :color="currentMusic.liked ? '#ff4757' : '#666'"></uni-icons>
						</view>
					</view>
					
					<!-- 进度条 -->
					<view class="music-progress">
						<slider class="progress-slider" :value="progressPercent" min="0" max="100" 
							@changing="onProgressChanging" @change="onProgressChange"
							activeColor="#1a73e8" backgroundColor="#e9f2ff" 
							block-color="#1a73e8" block-size="20" />
					</view>
					
					<!-- 控制按钮 -->
					<view class="music-control-buttons">
						<view class="control-btn" @click="playPrev">
							<uni-icons type="left" size="24" color="#333"></uni-icons>
						</view>
						<view class="play-btn" @click="togglePlay">
							<uni-icons :type="isPlaying ? 'pause' : 'play-filled'" 
								size="32" color="#fff"></uni-icons>
						</view>
						<view class="control-btn" @click="playNext">
							<uni-icons type="right" size="24" color="#333"></uni-icons>
						</view>
					</view>
					
					<!-- 播放列表 -->
					<view class="playlist-toggle" @click="showPlaylist = !showPlaylist">
						<text class="toggle-text">{{ showPlaylist ? '收起' : '播放列表' }}</text>
						<uni-icons :type="showPlaylist ? 'arrowup' : 'arrowdown'" 
							size="14" color="#666"></uni-icons>
					</view>
					
					<!-- 播放列表 -->
					<view class="playlist" v-if="showPlaylist">
						<view v-for="(music, index) in playlist" :key="index" 
							:class="['playlist-item', currentMusicIndex === index ? 'active' : '']"
							@click="playMusic(index)">
							<image class="item-cover" :src="music.cover" mode="aspectFill"></image>
							<view class="item-info">
								<text class="item-name">{{ music.name }}</text>
								<text class="item-artist">{{ music.artist }}</text>
							</view>
							<view class="item-duration">
								<text>{{ music.duration }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 城市介绍 -->
			<view class="card">
				<view class="card-title">
					<uni-icons type="info" size="20" color="#1a73e8"></uni-icons>
					<text class="title-text">城市介绍</text>
				</view>
				<view class="rich-text-container">
					<rich-text class="rich-text" :nodes="introContent"></rich-text>
				</view>
			</view>
			
			<!-- 探索进度 -->
			<view class="card">
				<view class="card-title">
					<uni-icons type="bars" size="20" color="#1a73e8"></uni-icons>
					<text class="title-text">探索进度</text>
				</view>
				<view class="progress-container">
					<view class="progress-info">
						<text class="progress-label">当前进度</text>
						<text class="progress-value">{{ progress }}%</text>
					</view>
					<view class="progress-wrapper">
						<progress class="progress-bar" :percent="progress" border-radius="10" active-color="#1a73e8"
							backgroundColor="#e9f2ff" />
						<view class="progress-bg"></view>
					</view>
				</view>
			</view>
			
			<!-- 城市选择与偏好设置 -->
			<view class="double-card">
				<view class="card half-card">
					<view class="card-title">
						<uni-icons type="location" size="20" color="#1a73e8"></uni-icons>
						<text class="title-text">城市选择</text>
					</view>
					<view class="picker-container">
						<picker mode="region" @change="onRegionChange" :value="region" class="region-picker">
							<view class="picker-content">
								<text class="picker-text">{{ region[1] }}</text>
								<uni-icons type="arrowdown" size="16" color="#666"></uni-icons>
							</view>
						</picker>
					</view>
				</view>
				
				<view class="card half-card">
					<view class="card-title">
						<uni-icons type="gear" size="20" color="#1a73e8"></uni-icons>
						<text class="title-text">出行方式</text>
					</view>
					<view class="travel-mode">
						<view v-for="item in travelModes" :key="item.value" 
							:class="['mode-item', travelMode === item.value ? 'active' : '']"
							@click="travelMode = item.value">
							<uni-icons :type="item.icon" size="20" 
								:color="travelMode === item.value ? '#fff' : '#1a73e8'"></uni-icons>
							<text class="mode-text">{{ item.name }}</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 搜索半径设置 -->
			<view class="card">
				<view class="card-title">
					<uni-icons type="ruler" size="20" color="#1a73e8"></uni-icons>
					<text class="title-text">探索范围</text>
				</view>
				<view class="radius-container">
					<view class="radius-info">
						<text class="radius-label">搜索半径</text>
						<text class="radius-value">{{ explorationRadius }} km</text>
					</view>
					<slider class="slider" :value="explorationRadius" min="1" max="50" @change="onSliderChange"
						activeColor="#1a73e8" backgroundColor="#e9f2ff" block-color="#1a73e8" block-size="20" />
					<view class="radius-scale">
						<text>1km</text>
						<text>25km</text>
						<text>50km</text>
					</view>
				</view>
			</view>
			
			<!-- 宣传视频 -->
			<view class="card">
				<view class="card-header">
					<view class="card-title">
						<uni-icons type="videocam" size="20" color="#1a73e8"></uni-icons>
						<text class="title-text">泉州宣传片</text>
					</view>
					<view class="play-all">
						<text class="play-text">播放全部</text>
						<uni-icons type="arrowright" size="14" color="#666"></uni-icons>
					</view>
				</view>
				<video class="video" src="/static/city-video.mp4" poster="/static/video-poster.jpg" controls
					show-play-btn show-center-play-btn enable-progress-gesture>
					<view class="video-tip">您的浏览器不支持视频播放</view>
				</video>
			</view>
			
			<!-- 操作按钮 -->
			<view class="action-buttons">
				<button class="btn btn-primary" @click="startExploring">
					<uni-icons type="play-filled" size="16" color="#fff"></uni-icons>
					<text>开始探索</text>
				</button>
				<button class="btn btn-secondary" @click="shareTrip">
					<uni-icons type="redo" size="16" color="#1a73e8"></uni-icons>
					<text>分享行程</text>
				</button>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentSwiper: 0,
				// 轮播图数据
				swiperList: [{
						image: '/static/city1.jpg',
						title: '泉州钟楼',
						desc: '泉州城市地标，见证城市岁月变迁'
					},
					{
						image: '/static/city2.jpg',
						title: '中国闽台缘博物馆',
						desc: '展示闽台关系历史，增进两岸文化交流'
					},
					{
						image: '/static/city3.jpg',
						title: '安平桥',
						desc: '中国现存古代最长的石桥，素有"天下无桥长此桥"的美誉'
					},
					{
						image: '/static/city4.jpg',
						title: '老君岩造像',
						desc: '中国现存最大的道教石雕，体现宋代雕刻艺术精华'
					},
					{
						image: '/static/city5.jpg',
						title: '东西塔',
						desc: '开元寺内标志性建筑，是中国古代石构建筑的瑰宝'
					}
				],
				// 城市介绍富文本，结合泉州特色撰写
				introContent: `
					<p style="margin-bottom: 20rpx; line-height: 1.6;">泉州，古称"刺桐"，地处福建省东南部，是国务院首批公布的24个历史文化名城之一。</p>
					<p style="margin-bottom: 20rpx; line-height: 1.6;">它是联合国教科文组织认定的<strong style="color: #1a73e8; font-weight: bold;">海上丝绸之路起点</strong>，宋元时期作为世界海洋商贸中心，千帆竞发，商贾云集，盛极一时。</p>
					<p style="margin-bottom: 20rpx; line-height: 1.6;">泉州文化多元且厚重，佛教、伊斯兰教、基督教等多种宗教文化在此交融，素有"此地古称佛国，满街都是圣人"的赞誉。这里拥有<strong style="color: #1a73e8;">开元寺、清净寺、清源山、崇武古城</strong>等众多名胜古迹，每一处都承载着悠久的历史故事。</p>
					<p style="margin-bottom: 0; line-height: 1.6;">同时，泉州也是著名的侨乡和台湾同胞主要祖籍地，分布在世界129个国家和地区的泉州籍华侨华人约750万人，血脉相连，情系桑梓。</p>
				`,
				// 探索进度
				progress: 60,
				// 城市选择
				region: ['福建省', '泉州市', '鲤城区'],
				// 出行方式
				travelModes: [{
						value: 'bus',
						name: '公交',
						icon: 'bus'
					},
					{
						value: 'car',
						name: '自驾',
						icon: 'car'
					},
					{
						value: 'walk',
						name: '步行',
						icon: 'person'
					}
				],
				travelMode: 'bus',
				explorationRadius: 15,
				// 音乐播放器相关数据
				isPlaying: false,
				currentMusicIndex: 0,
				currentTime: '00:00',
				duration: '00:00',
				progressPercent: 0,
				showPlaylist: false,
				playlist: [
					{
						name: '泉州古韵',
						artist: '传统民乐',
						cover: '/static/music-cover1.jpg',
						duration: '03:45',
						liked: false
					},
					{
						name: '海丝之路',
						artist: '民族交响',
						cover: '/static/music-cover2.jpg',
						duration: '04:20',
						liked: true
					},
					{
						name: '刺桐花开',
						artist: '闽南民歌',
						cover: '/static/music-cover3.jpg',
						duration: '03:15',
						liked: false
					},
					{
						name: '古城记忆',
						artist: '轻音乐',
						cover: '/static/music-cover4.jpg',
						duration: '05:10',
						liked: false
					}
				],
				audioContext: null,
				timer: null
			}
		},
		computed: {
			currentMusic() {
				return this.playlist[this.currentMusicIndex] || {}
			}
		},
		methods: {
			// 轮播图变化
			onSwiperChange(e) {
				this.currentSwiper = e.detail.current
			},
			// 城市选择变化
			onRegionChange(e) {
				this.region = e.detail.value
				uni.showToast({
					title: '城市已更新',
					icon: 'success'
				})
			},
			// 滑块变化
			onSliderChange(e) {
				this.explorationRadius = e.detail.value
			},
			// 开始探索
			startExploring() {
				uni.showLoading({
					title: '规划路线中...'
				})
				setTimeout(() => {
					uni.hideLoading()
					uni.showModal({
						title: '开始探索',
						content: `将以${this.getTravelModeText()}方式,在${this.explorationRadius}km范围内探索${this.region[1]}的精彩!`,
						showCancel: false
					})
				}, 1500)
			},
			// 分享行程
			shareTrip() {
				uni.showActionSheet({
					itemList: ['微信好友', '朋友圈', 'QQ', '微博'],
					success: (res) => {
						uni.showToast({
							title: '分享成功',
							icon: 'success'
						})
					}
				})
			},
			// 获取出行方式文本
			getTravelModeText() {
				const mode = this.travelModes.find(item => item.value === this.travelMode)
				return mode ? mode.name : '公交'
			},
			// 音乐播放器方法
			togglePlay() {
				this.isPlaying = !this.isPlaying
				if (this.isPlaying) {
					this.startPlayback()
				} else {
					this.pausePlayback()
				}
			},
			startPlayback() {
				// 模拟播放进度
				this.timer = setInterval(() => {
					if (this.progressPercent < 100) {
						this.progressPercent += 1
						this.currentTime = this.formatTime(this.progressPercent * 225 / 100) // 假设歌曲长度225秒
					} else {
						this.playNext()
					}
				}, 1000)
			},
			pausePlayback() {
				if (this.timer) {
					clearInterval(this.timer)
					this.timer = null
				}
			},
			playNext() {
				this.pausePlayback()
				this.currentMusicIndex = (this.currentMusicIndex + 1) % this.playlist.length
				this.progressPercent = 0
				this.currentTime = '00:00'
				this.duration = this.currentMusic.duration
				if (this.isPlaying) {
					this.startPlayback()
				}
			},
			playPrev() {
				this.pausePlayback()
				this.currentMusicIndex = (this.currentMusicIndex - 1 + this.playlist.length) % this.playlist.length
				this.progressPercent = 0
				this.currentTime = '00:00'
				this.duration = this.currentMusic.duration
				if (this.isPlaying) {
					this.startPlayback()
				}
			},
			playMusic(index) {
				this.pausePlayback()
				this.currentMusicIndex = index
				this.progressPercent = 0
				this.currentTime = '00:00'
				this.duration = this.currentMusic.duration
				if (this.isPlaying) {
					this.startPlayback()
				}
			},
			toggleLike() {
				this.playlist[this.currentMusicIndex].liked = !this.playlist[this.currentMusicIndex].liked
			},
			onProgressChanging(e) {
				// 拖动进度条时的处理
				this.progressPercent = e.detail.value
			},
			onProgressChange(e) {
				// 进度条改变完成后的处理
				this.progressPercent = e.detail.value
				this.currentTime = this.formatTime(this.progressPercent * 225 / 100)
			},
			formatTime(seconds) {
				const mins = Math.floor(seconds / 60)
				const secs = Math.floor(seconds % 60)
				return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
			}
		},
		mounted() {
			// 初始化音乐时长
			this.duration = this.currentMusic.duration
		},
		beforeDestroy() {
			this.pausePlayback()
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background: linear-gradient(180deg, #f0f7ff 0%, #f5f5fa 100%);
	}
	
	// 导航栏样式
	.custom-navbar {
		background: linear-gradient(135deg, #1a73e8, #6ab0ff);
		color: white;
		padding: 60rpx 30rpx 30rpx;
		border-bottom-left-radius: 30rpx;
		border-bottom-right-radius: 30rpx;
		box-shadow: 0 10rpx 30rpx rgba(26, 115, 232, 0.2);
		
		.nav-content {
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.nav-title {
				display: flex;
				flex-direction: column;
				
				.title {
					font-size: 42rpx;
					font-weight: bold;
					margin-bottom: 8rpx;
				}
				
				.subtitle {
					font-size: 26rpx;
					opacity: 0.9;
				}
			}
			
			.nav-avatar {
				.avatar {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					border: 3rpx solid rgba(255, 255, 255, 0.3);
				}
			}
		}
	}
	
	// 滚动区域
	.scroll-view {
		height: calc(100vh - 180rpx);
		padding: 30rpx;
	}
	
	// 卡片通用样式
	.card {
		background: white;
		border-radius: 24rpx;
		box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.06);
		padding: 30rpx;
		margin-bottom: 30rpx;
		position: relative;
		overflow: hidden;
		
		// 卡片头部
		.card-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30rpx;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #f0f0f0;
		}
		
		.card-title {
			display: flex;
			align-items: center;
			
			.title-text {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin-left: 15rpx;
			}
		}
		
		// 卡片指示器
		.card-indicator {
			.indicator-text {
				font-size: 24rpx;
				color: #999;
			}
		}
		
		// 播放全部
		.play-all {
			display: flex;
			align-items: center;
			
			.play-text {
				font-size: 24rpx;
				color: #666;
				margin-right: 8rpx;
			}
		}
	}
	
	// 轮播图卡片特殊样式
	.swiper-card {
		padding: 0;
		
		.card-header {
			padding: 30rpx 30rpx 20rpx;
			margin-bottom: 0;
		}
	}
	
	// 音乐播放器卡片样式
	.music-player-card {
		.music-controls {
			.music-time {
				font-size: 24rpx;
				color: #666;
			}
		}
		
		.music-player {
			.music-info {
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;
				
				.music-cover {
					width: 120rpx;
					height: 120rpx;
					border-radius: 16rpx;
					margin-right: 20rpx;
				}
				
				.music-details {
					flex: 1;
					display: flex;
					flex-direction: column;
					
					.music-name {
						font-size: 32rpx;
						font-weight: bold;
						color: #333;
						margin-bottom: 8rpx;
					}
					
					.music-artist {
						font-size: 24rpx;
						color: #666;
					}
				}
				
				.music-like {
					padding: 20rpx;
				}
			}
			
			.music-progress {
				margin-bottom: 30rpx;
				
				.progress-slider {
					width: 100%;
				}
			}
			
			.music-control-buttons {
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 60rpx;
				margin-bottom: 30rpx;
				
				.control-btn {
					width: 80rpx;
					height: 80rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50%;
					background-color: #f8f9fa;
					transition: all 0.3s;
					
					&:active {
						background-color: #e9ecef;
					}
				}
				
				.play-btn {
					width: 100rpx;
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50%;
					background: linear-gradient(135deg, #1a73e8, #6ab0ff);
					box-shadow: 0 10rpx 20rpx rgba(26, 115, 232, 0.3);
					transition: all 0.3s;
					
					&:active {
						transform: scale(0.95);
						box-shadow: 0 5rpx 10rpx rgba(26, 115, 232, 0.3);
					}
				}
			}
			
			.playlist-toggle {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 20rpx;
				border-top: 1rpx solid #f0f0f0;
				margin-top: 20rpx;
				
				.toggle-text {
					font-size: 26rpx;
					color: #666;
					margin-right: 10rpx;
				}
			}
			
			.playlist {
				margin-top: 20rpx;
				max-height: 400rpx;
				overflow-y: auto;
				
				.playlist-item {
					display: flex;
					align-items: center;
					padding: 20rpx;
					border-radius: 12rpx;
					margin-bottom: 10rpx;
					transition: all 0.3s;
					
					&.active {
						background-color: #e9f2ff;
						
						.item-name {
							color: #1a73e8;
						}
					}
					
					&:active {
						background-color: #f8f9fa;
					}
					
					.item-cover {
						width: 80rpx;
						height: 80rpx;
						border-radius: 12rpx;
						margin-right: 20rpx;
					}
					
					.item-info {
						flex: 1;
						display: flex;
						flex-direction: column;
						
						.item-name {
							font-size: 28rpx;
							color: #333;
							margin-bottom: 5rpx;
						}
						
						.item-artist {
							font-size: 22rpx;
							color: #666;
						}
					}
					
					.item-duration {
						font-size: 22rpx;
						color: #999;
					}
				}
			}
		}
	}
	
	// 轮播图样式
	.swiper {
		height: 400rpx;
		
		.swiper-item {
			position: relative;
			width: 100%;
			height: 100%;
			
			.swiper-image {
				width: 100%;
				height: 100%;
			}
			
			.swiper-content {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				background: linear-gradient(transparent, rgba(0,0,0,0.7));
				padding: 30rpx;
				color: white;
				
				.swiper-title {
					font-size: 36rpx;
					font-weight: bold;
					display: block;
					margin-bottom: 10rpx;
				}
				
				.swiper-desc {
					font-size: 26rpx;
					opacity: 0.9;
				}
			}
		}
	}
	
	// 自定义指示点
	.custom-indicator {
		display: flex;
		justify-content: center;
		padding: 20rpx 0 30rpx;
		
		.indicator-dot {
			width: 12rpx;
			height: 12rpx;
			border-radius: 50%;
			background-color: rgba(0, 0, 0, 0.2);
			margin: 0 6rpx;
			transition: all 0.3s;
			
			&.active {
				width: 30rpx;
				background-color: #1a73e8;
				border-radius: 6rpx;
			}
		}
	}
	
	// 富文本容器
	.rich-text-container {
		padding: 10rpx 0;
		
		.rich-text {
			font-size: 28rpx;
			line-height: 1.8;
			color: #333;
		}
	}
	
	// 进度条样式
	.progress-container {
		.progress-info {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
			
			.progress-label {
				font-size: 28rpx;
				color: #333;
			}
			
			.progress-value {
				font-size: 28rpx;
				color: #1a73e8;
				font-weight: bold;
			}
		}
		
		.progress-wrapper {
			position: relative;
			
			.progress-bar {
				width: 100%;
				position: relative;
				z-index: 2;
			}
			
			.progress-bg {
				position: absolute;
				top: 50%;
				left: 0;
				transform: translateY(-50%);
				width: 100%;
				height: 20rpx;
				background-color: #e9f2ff;
				border-radius: 10rpx;
				z-index: 1;
			}
		}
	}
	
	// 双卡片布局
	.double-card {
		display: flex;
		justify-content: space-between;
		gap: 20rpx;
		margin-bottom: 30rpx;
		
		.half-card {
			flex: 1;
			margin-bottom: 0;
		}
	}
	
	// 选择器样式
	.picker-container {
		.region-picker {
			.picker-content {
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.picker-text {
					font-size: 32rpx;
					color: #333;
					font-weight: 500;
				}
			}
		}
	}
	
	// 出行方式
	.travel-mode {
		display: flex;
		justify-content: space-between;
		
		.mode-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 20rpx;
			border-radius: 16rpx;
			background-color: #f8f9fa;
			transition: all 0.3s;
			flex: 1;
			margin: 0 10rpx;
			
			&.active {
				background: linear-gradient(135deg, #1a73e8, #6ab0ff);
				
				.mode-text {
					color: #fff;
				}
			}
			
			.mode-text {
				font-size: 24rpx;
				color: #333;
				margin-top: 10rpx;
			}
		}
	}
	
	// 搜索半径设置
	.radius-container {
		.radius-info {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
			
			.radius-label {
				font-size: 28rpx;
				color: #333;
			}
			
			.radius-value {
				font-size: 28rpx;
				color: #1a73e8;
				font-weight: bold;
			}
		}
		
		.slider {
			width: 100%;
			margin-bottom: 10rpx;
		}
		
		.radius-scale {
			display: flex;
			justify-content: space-between;
			
			text {
				font-size: 22rpx;
				color: #999;
			}
		}
	}
	
	// 视频样式
	.video {
		width: 100%;
		height: 400rpx;
		border-radius: 16rpx;
		
		.video-tip {
			text-align: center;
			color: #999;
			padding: 40rpx;
		}
	}
	
	// 操作按钮
	.action-buttons {
		display: flex;
		gap: 20rpx;
		margin: 40rpx 0;
		
		.btn {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 15rpx;
			padding: 25rpx;
			border-radius: 16rpx;
			font-size: 30rpx;
			font-weight: bold;
			border: none;
			transition: all 0.3s;
			
			&.btn-primary {
				background: linear-gradient(135deg, #1a73e8, #6ab0ff);
				color: white;
				box-shadow: 0 10rpx 20rpx rgba(26, 115, 232, 0.3);
				
				&:active {
					transform: translateY(2rpx);
					box-shadow: 0 5rpx 10rpx rgba(26, 115, 232, 0.3);
				}
			}
			
			&.btn-secondary {
				background-color: white;
				color: #1a73e8;
				border: 1rpx solid #e0e0e0;
				
				&:active {
					background-color: #f8f9fa;
				}
			}
		}
	}
</style>